/**
 * 基于fabric.js的Web绘图器
 * Created by aegean on 2017/8/16 0019.
 */

/*主要样式*/
.aDrawer-wrapper{
    position: relative;
    /*display: inline-flex;*/
    /*display: flex;
    justify-content: center;
    align-items: center;*/
    background-color: #3a3a3a;
    overflow: hidden;
}
.aDrawer{
    position: absolute;
    background-size: 100% 100%;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    /* overflow: hidden; */
}
.aDrawer.show{
    display: block;
}
.aDrawer-percent {
    position: absolute;
    padding: 3px 10px;
    left: calc(50% - 32px);
    top: calc(50% - 13px);
    color: white;
    background-color: rgba(0, 0, 0, 0.383);
    font-size: 15px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/*悬浮窗*/
.ag-overlay {
    position: absolute;
    z-index: 1;
}

/*辅助样式*/
.aDrawer-loading{
    position: absolute;
    width: 50px;
    height: 50px;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    background: url("./images/loading.png") 0px 0px no-repeat;
    background-size: 50px;
    transition: transform 1s ease-out;
    animation: time-loading 3.5s infinite linear;
    z-index: 2;
}
@keyframes time-loading{
    0%{
        transform: rotateZ(0deg);
    }
    30%{
        transform: rotateZ(180deg);
    }
    50%{
        transform: rotateZ(180deg);
    }
    80%{
        transform: rotateZ(360deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}
.aDrawer-mask{
    position: absolute;
    width: 300px;
    height: 154px;
    left: 0px;
    top: 0px;
    background-color: transparent;
    z-index: 3;
    /* cursor: url("./images/cursor/hand-open.ico"), auto; */
}
.aDrawer-mask.dark{
    background-color: rgba(6, 6, 6, 0.6);
}
.ag-smooth{
    transform-origin: center center;
    /* transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); */
    transition: all 0.5s ease-out;
}
.ag-back-transparent {
    background: transparent !important;
}

/* 抓手 */
.grab {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}
.grabbing {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}
